<template>
	<a-layout id="components-layout-demo-custom-trigger">
		<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
			<div class="logo" />
			<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
				<router-link to="/">
					<a-menu-item key="1">
						<WindowsOutlined />
						<span> 首页 </span>
					</a-menu-item>
				</router-link>
				<router-link to="/news">
					<a-menu-item key="2">
						<video-camera-outlined />
						<span> 新闻 </span>
					</a-menu-item>
				</router-link>
				<router-link to="/user">
					<a-menu-item key="3">
						<user-outlined />
						<span> 用户 </span>
					</a-menu-item>
				</router-link>
			</a-menu>
		</a-layout-sider>
		<a-layout>
			<a-layout-header style="background: #fff; padding: 0">
				<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
				<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
			</a-layout-header>
			<a-layout-content :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }">
				<router-view></router-view>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	import {
		UserOutlined,
		VideoCameraOutlined,
		WindowsOutlined,
		MenuUnfoldOutlined,
		MenuFoldOutlined,
	} from "@ant-design/icons-vue";
	export default defineComponent({
		data() {
			return {
				selectedKeys: ["2"],
				collapsed: false,
			};
		},
		components: {
			UserOutlined,
			VideoCameraOutlined,
			WindowsOutlined,
			MenuUnfoldOutlined,
			MenuFoldOutlined,
		},
	});
</script>

<style lang="scss">
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	#components-layout-demo-custom-trigger .logo {
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px;
	}

	.ant-menu-item-selected a,
	.ant-menu-item a {
		color: #fff;
	}
</style>